<template>
  <router-view>
    <div class="app-body">
      <img :src="cover" class="cover">
      <div class="shop-info">
        <div class="shop-info-bd">
          <h3>茶韵体验店</h3>
          <p>营业时间：8:00-21:00</p>
        </div>
        <div class="shop-info-ft">
          <div class="score">4.7分</div>
          <a>查看评论</a>
        </div>
      </div>

      <div class="cells">
        <div class="cell">
          <div class="cell-bd">上海市浦东新区金科路300号</div>
          <div class="cell-ft"><icon id="location"></icon>2.3km</div>
        </div>
      </div>

      <div class="block">
        <h3 class="mid">
          <router-link to="/shop/activity-list">门店活动</router-link>
        </h3>
        <activity-item :item="activity"></activity-item>
      </div>

      <div class="block">
        <h3 class="mid">
          <router-link to="/shop/fairy-list">门店仙子</router-link>
        </h3>
        <ul class="fairies">
          <li class="fairy" v-for="item in fairyList" :key="item.id">
            <div class="fairy-avatar">
              <img :src="item.avatar">
              <i>{{item.level}}</i>
            </div>

            <h3>{{item.name}}</h3>
            <h4>{{item.levelName}}</h4>
          </li>
        </ul>
      </div>

      <div class="block">
        <h3 class="mid">环境展示</h3>
        <img :src="detail">
        <img :src="env">
        <img :src="culture">
      </div>
    </div>
    <div class="footer">
      <a class="footer-btn">电话</a>
      <a class="footer-btn" @click="preBook">预约房间</a>
    </div>
    <shop-book ref="shopBook" @submit="submit"></shop-book>
  </router-view>
</template>

<script>
import ActivityItem from '@/components/ShopActivityItem'
import ShopBook from '@/components/ShopBook'

import cover from '@/assets/img/tmp/cover.jpg'
import detail from '@/assets/img/tmp/detail.jpg'
import env from '@/assets/img/tmp/env.jpg'
import culture from '@/assets/img/tmp/culture.jpg'
import face from '@/assets/img/tmp/face.jpg'
import avatar from '@/assets/img/tmp/avatar.jpg'

export default {
  data () {
    return {
      cover,
      detail,
      env,
      culture,

      activity: { face, name: '以茶会友交流会', address: '上海市浦东新区紫薇路', time: '2017.7.20 17:00' },

      fairyList: [
        { id: 1, avatar, name: '蟹黄包同学', level: 4.1, levelName: '等级名' },
        { id: 2, avatar, name: '蟹黄包同学', level: 4.1, levelName: '等级名' },
        { id: 3, avatar, name: '蟹黄包同学', level: 4.1, levelName: '等级名' }
      ]
    }
  },
  methods: {
    preBook () {
      this.$refs.shopBook.show = 1
    },
    submit () {
      this.$refs.shopBook.show = 0
    }
  },
  components: {
    ActivityItem,
    ShopBook
  }
}
</script>

<style lang="scss" scoped>
.app-body {
  padding-bottom: 1em;
}

.cover {
  width: 100%;
}

.shop-info {
  display: flex;
  padding: 12px 10px;
  background: $bg;

  &-bd {
    flex: 1;

    > h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 500;
    }

    > p {
      margin: 10px 0 0;
      font-size: 12px;
    }
  }

  &-ft {
    padding-left: .5em;
    text-align: center;
    border-left: 1px solid $border-color;

    > a {
      font-size: 12px;
    }

    > .score {
      color: $color-primary;
    }
  }
}

.cells {
  margin-top: 10px;
}

.cell-ft .icon {
  font-size: 20px;
  vertical-align: -.2em;
  color: $color;
}

.fairies {
  margin: 0;
  padding: 1em;
  list-style: none;
  white-space: nowrap;
  background: $bg;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.fairy {
  display: inline-block;
  margin: 0 1.5em;
  text-align: center;

  &-avatar {
    display: inline-block;
  }

  > h3,
  > h4 {
    margin: 0;
    line-height: 1.5;
    font-weight: 400;
  }

  > h3 {
    margin-top: .5em;
    font-size: $font-size;
  }

  > h4 {
    font-size: $font-size-s;
    color: $color-gray;
  }
}
</style>
